<template>
  <image class="c-checkbox" :style="style" :src="src" @click="onChange" />
</template>

<script>
import uncheckImg from "./uncheck.png"
import checkedImg from "./checked.png"
import { objStyle2StrStyle } from "@/utils/util.js"

export default {
  props: {
    size: {
      type: Number,
      default: 26
    },
    value: {
      type: Boolean,
      default: false
    },
    customStyle: {
      type: Object,
      default: {}
    }
  },
  computed: {
    src() {
      return this.value ? checkedImg : uncheckImg
    },
    style() {
      const size = `${this.size}rpx`
      const s = objStyle2StrStyle({
        width: size,
        height: size,
        ...this.customStyle
      })
      return s
    }
  },
  methods: {
    onChange() {
      this.$emit("change", { value: !this.value })
    }
  }
}
</script>

<style lang="scss">
.c-checkbox {
  display: block;
}
</style>